<template>
    <div>
        <!-- 大容器 -->
        <section class="container">
            <!-- 左容器 -->
            <section class="itemLeft">
                <Ip>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemOne />
                    </template>
                </Ip>
                <Ip>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemTwo />
                    </template>
                </Ip>
            </section>
            <!-- 右容器 -->
            <section class="itemRight">
                <Ip>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemThree />
                    </template>
                </Ip>
                <Ip>
                    <!-- 插入槽口 -->
                    <template #main>
                        <ItemFour />
                    </template>
                </Ip>
            </section>
        </section>
    </div>
</template>

<script setup lang="ts">
import Ip from "../../components/ItemPage.vue"

import ItemOne from "../../components/ItemOne.vue"
import ItemTwo from "../../components/ItemTwo.vue"
import ItemThree from "../../components/ItemThree.vue"
import ItemFour from "../../components/ItemFour.vue"

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    margin: 0 auto;
    background-color: gray;
    display: flex;

    .itemLeft,
    .itemRight {
        flex: 1;
    }
}
</style>